<template>
  <el-form :model="form" ref="form">
    <div
      class="form-flex"
      v-for="(item, index) in form.formData"
      :key="item.key"
    >
      <el-form-item
        :prop="'formData.' + index + '.date'"
        :rules="rules.rulesData"
      >
        <el-date-picker
          @change="dateChange(index, $event)"
          autocomplete="off"
          v-model="item.date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item
        style="margin-left: 20px"
        :prop="'formData.' + index + '.numVal'"
        :rules="rules.rulesNum"
      >
        <el-input
          v-model.number="item.numVal"
          placeholder="请输入数字"
        ></el-input>
      </el-form-item>
    </div>

    <el-form-item>
      <el-button @click="addDomain">新增</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    let checkNum = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("数字不能为空"));
      }
      if (!Number.isInteger(value)) {
        callback(new Error("请输入数字值"));
      } else {
        let reg = new RegExp("^[-]?([1-9]\\d{0,8}|0)$");
        if (!reg.test(value)) {
          callback(new Error("不能超过9位数"));
        } else {
          callback();
        }
      }
    };

    return {
      form: {
        formData: [
          {
            date: [],
            numVal: null,
          },
        ],
      },
      dateChangeCount: 0,

      successDate: [],

      rules: {
        rulesData: {
          required: true,
          trigger: "change",
          message: "请选择时间",
        },
        rulesNum: {
          validator: checkNum,
          trigger: "blur",
        },
      },
    };
  },
  methods: {
    addDomain() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // alert("submit!");
          this.form.formData.push({
            date: [],
            numVal: null,
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    isDate(index, val) {
      let startDate = val[0];
      let endDate = val[1];
      for (let i = 0; i < this.successDate.length - 1; i++) {
        if (
          ((startDate >= this.successDate[i][0] &&
            startDate <= this.successDate[i][1]) ||
            endDate >= this.successDate[i][0]) &&
          endDate <= this.successDate[i][1]
        ) {
          this.successDate.splice(i, 1);
          this.form.formData[index].date = [];
          this.$message("选择日期不可重叠");
        }
      }
    },

    dateChange(index, val) {
      console.log("index", index);
      if (!val) {
        this.successDate.splice(index, 1);
        return;
      }
      this.successDate.push(val);
      this.isDate(index, val);
    },
  },
};
</script>

<style scoped>
.form-flex {
  display: flex;
}
</style>